<template>
  <div id="app">

    <header>
      <input v-model="text"  type="text" placeholder="输入歌曲名字...">
      <button @click="search" class="fa fa-search fa-x"></button>
    </header>

    <main>
      <div class="song-lists" v-for="(list, index) of songs" :key="index" :id="list.id">
        <span class="song-name">{{list.name}}</span>
        <span class="singer">{{list.artists[0].name}}</span>
        <span :class="{bac: num !== index, bac1: num === index}" @click="playSong(list.id, index)" ></span>
      </div>
      <div class="position">
        <audio :src="this.src" autoplay controls></audio>
      </div>
    </main>


  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      num: -1,
      songs: [],
      text: '',
      src: '',
      isBac: true,
      isBac1: false
    }
  },
  methods: {
    search() {
      axios({
        method: 'GET',
        url: `http://musicapi.leanapp.cn/search?keywords=${this.text}`,
      }).then((res) => {
        this.songs = res.data.result.songs

      }).catch((e) => {
        console.log(e)
      })
    },

     playSong: function (ID,index) {
      if (this.isBac) {
        this.src = `https://music.163.com/song/media/outer/url?id=${ID}.mp3`
        document.querySelector('audio').play()
        this.num = index
        this.isBac = !this.isBac
      } else {
        document.querySelector('audio').pause()
        this.num = -1
        this.isBac = !this.isBac
      }

    },
  },
}


</script>

<style>
@import "~font-awesome/css/font-awesome.css";

* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1000px;
  /*height: 80px;*/
  background: #2c3e50;
  margin: 0 auto;
}
header input {
  width: 600px;
  height: 40px;
  background: #2c3e50;
  border: none;
  font-size: 20px;
  color: #fff;
  padding: 20px 0;
}
header input:focus {
  outline: none;
}
header button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}
header button:focus {
  outline: none;
}
main .song-lists {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  margin: 5px auto;
  padding: 10px 0;
  border: 1px solid #b0b0b0;
}
main .song-lists .song-name {
  width: 250px;
  overflow: hidden;
  padding-left: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bac {
  width: 50px;
  height: 15px;
  background: url("../public/play.png") no-repeat center;

}
.bac1 {
  width: 50px;
  height: 15px;
  background: url("../public/pause.png") no-repeat center;
}
.position {
  width: 800px;
  margin: 0 auto;
}
audio {
  position: fixed;
  left: 200px;
  bottom: 20px;
  width: 1400px;
  margin: 0 auto;
}

</style>
